<template>
  <div class="bottom-banner" v-if="route.path !== '/login'">
    <div class="bottom-banner-content">
      <div class="logos">
        <div class="logo">
          <img src="@/assets/images/zheng.png" />
          <p>100%正品</p>
        </div>
        <div class="logo">
          <img src="@/assets/images/su.png" />
          <p>极速配送</p>
        </div>
        <div class="logo">
          <img src="@/assets/images/shou.png" />
          <p>售后无忧</p>
        </div>
        <div class="logo">
          <img src="@/assets/images/chang.png" />
          <p>厂家直发</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<style lang="less" scoped>
.bottom-banner {
  padding: 40px 0;
  background-color: #fff;
  box-sizing: border-box;

  .bottom-banner-content {
    width: 1080px;
    margin: 0 auto;
    display: flex;

    .logos {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        img {
          width: 70px;
          height: 70px;
        }

        p {
          width: 96px;
          height: 33px;
          color: var(--color-text);
          font-size: 24px;
          font-weight: 500;
          line-height: 33px;
          margin-left: 15px;
        }
      }
    }

    .logo:first-child {
      p {
        width: 112px;
      }
    }
  }
}
</style>
